小白網頁設計練成記-DAY17-CSS的優先權

2022 iThome 鐵人賽

DAY 17

自我挑戰組

小白網頁設計練成記系列第 17 篇

14th鐵人賽 css 新手上路

Eric

2022-09-17 10:48:46

472 瀏覽

分享至

在寫CSS的時候，我們有不同的撰寫方式比如行內套用以及嵌入套用
(更多套用的說明請看這:https://ithelp.ithome.com.tw/articles/10291656)
但是要特別注意CSS優先權的問題，下面我們來舉個例子:

後寫的優於先寫的

我們在< head >裡打上< style >，讓段落呈現藍色

<title>Document</title>
    <style>
        p{
            color: blue;
        }
    </style>    
</head>
<body>
   <p>這是段落</p>
</body>
</html>

顯示如下:

**接著在color:blue下一行新增color:red

<title>Document</title>
    <style>
        p{
            color: blue;
            color: red;
        }
    </style>    
</head>
<body>
   <p>這是段落</p>
</body>
</html>

顯示如下:

由上述可知道，撰寫的先後順序，後寫的會優於先寫的，所以後寫的會被套用!

行內套用優於嵌入套用

我們在< head >裡打上< style >，讓段落呈現藍色

<title>Document</title>
    <style>
        p{
            color: blue;
        }
    </style>    
</head>
<body>
   <p>這是段落</p>
</body>
</html>

顯示如下:

接著我們在行內打上< style >

<title>Document</title>
   <style>
       p{
           color: blue;
       }
   </style>    
</head>
<body>
  <p style= color:red>這是段落</p>
</body>
</html>

顯示如下:

由上述可以知道，行內套用的方式會會優於嵌入套用的方式~

最重要! IMPORTANT

最後介紹就代表它最重要啦~
我們先把行內改成green，接者在< head >裡的 color :blue 後面加上!important

<title>Document</title>
   <style>
       p{
           color: blue !important;
       }
   </style>    
</head>
<body>
  <p style= color:green>這是段落</p>
</body>
</html>

顯示如下:

由上述可已知道，加上!important後，屬性值優先權最高，先被套用!